<template>
    <div class="tags">
        <div class="tags-header">
            <div class="tags-header-title">
                关注
            </div>
            <div class="tags-sort">
                <router-link :to="{path:`/user/${this.$route.params.id}/following`}" class="tags-type">关注的用户</router-link>
                <router-link :to="{path:`/user/${this.$route.params.id}/followers`}" class="tags-type active">关注者</router-link>
            </div>
        </div>
        <div v-if="fans.length!=0">
            <ul class="tags-list">
                <li class="tag-item" v-for="(item,index) in fans" :key="index">
                    <div class="tag">
                        <div class="tag-link">
                            <img class="avatar" :src="iconBasicUrl+item.icon" alt="">
                            <div class="info-box">
                                <router-link :to="{path:`/user/${item.user_id}`}" class="user-name">
                                    <span class="name">{{item.nick_name}}</span>
                                </router-link>
                                <div class="detail">
                                    首席打杂官｜掘友の心灵按摩师 @ 掘金
                                </div>
                            </div>
                            <button v-if="item.user_id!=$store.state.userID" class="follow-btn" :class="followArr[index]?'active':''" @click="isFollow(index)">
                                {{following[index]}}
                            </button>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <div v-else>
            这里什么都没有
        </div>
    </div>
</template>
<script>
    export default {
        name: "Followers",
        created(){
          this.getFans()
        },
        data(){
            return {
                concerns:[],
                fans:[],
                //关注的状态
                followArr:[],
                iconBasicUrl:"http://api_devss.wanxikeji.cn/"
            }
        },
        methods:{
            async getFans(){
                this.followArr=[]
                let id = this.$route.params.id
                let result = await this.axios.post(`api/concernList?user_id=${id}`)
                // console.log(result.data.data);
                this.fans=result.data.data.fans
                this.concerns = result.data.data.my_concern
                if(this.$store.state.token){
                    if(id==this.$store.state.userID){//如果是本人的主页
                    let arr = []//已经关注了的用户
                    for(let i=0;i<this.concerns.length;i++){
                        for(let j=0;j<this.fans.length;j++){
                            if(this.concerns[i].user_id==this.fans[j].user_id){
                                arr.push(this.fans[j])
                            }
                        }
                    }
                    for(let i=0;i<arr.length;i++){
                        this.followArr.push(true)
                    }
                    for(let i=0;i<result.data.data.fans.length-arr.length;i++){
                        this.followArr.push(false)
                    }
                    // console.log(result.data.data.fans);
                    result.data.data.fans = result.data.data.fans.concat(arr).filter(function(v, i, _arr) {
                        return _arr.indexOf(v) === _arr.lastIndexOf(v);
                    });
                    // console.log(result.data.data.fans);
                    // console.log(arr);
                    this.fans=arr.concat(result.data.data.fans)
                    }else{
                        // 获取路人的粉丝列表
                        let self = await this.axios.post(`api/concernList?user_id=${this.$store.state.userID}`)
                        //我关注的用户
                        this.concerns=self.data.data.my_concern
                        // console.log(self.data.data.my_concern);
                        let arr = []
                        for(let i=0;i<this.concerns.length;i++){
                            for(let j=0;j<this.fans.length;j++){
                                if(this.concerns[i].user_id==this.fans[j].user_id){
                                    arr.push(this.fans[j])
                                    // console.log(result.data.data.fans[i].user_id);
                                }
                            }
                        }
                        console.log(arr);
                        // let arr1=[]
                        // for(let i=0;i<result.data.data.fans.length;i++){
                        //     arr1.push(result.data.data.fans[i])
                        // }
                        // console.log(result.data.data.fans.concat(arr));
                        result.data.data.fans = result.data.data.fans.concat(arr).filter((v, i, _arr)=>{
                            return _arr.indexOf(v) === _arr.lastIndexOf(v);
                        })
                        console.log(result.data.data.fans)
                        for(let i=0;i<arr.length;i++){
                            this.followArr.push(true)
                        }
                        for(let i=0;i<result.data.data.fans.length;i++){
                            this.followArr.push(false)
                        }
                        this.fans=arr.concat(result.data.data.fans)
                    }
                }else{
                    for(let i=0;i<this.fans.length;i++){
                        this.followArr.push(false)
                    }
                }
            },
            async isFollow(index){
                console.log(index);
                if(!this.$store.state.token){
                    alert("请登录")
                    return
                }
                let result
                console.log(this.followArr);
                if(this.followArr[index]){
                    result = await this.axios.post("api/concernDel",{
                        token:this.$store.state.token,
                        be_concern_user_id:this.fans[index].user_id
                    })
                }else{
                    result = await this.axios.post("api/concern",{
                        token:this.$store.state.token,
                        be_concern_user_id:this.fans[index].user_id
                    })
                }
                console.log(result)
                this.followArr.splice(index,1,!this.followArr[index])
                this.eventBus.$emit("followersCallUserUpdate")
            }
        },
        computed:{
            following(){
                let statearr=[]
                for(let i=0;i<this.followArr.length;i++){
                    if(this.followArr[i]){
                        statearr.push("已关注")
                    }else{
                        statearr.push("关注")
                    }
                }
                return statearr
            }
        }
    }
</script>

<style scoped>
    .tags-sort .tags-type.active{
        color:#000
    }
    .tags .tags-header{
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        padding: 0 28px;
        height: 50px;
        white-space: nowrap;
        border-bottom: 2px solid rgba(230,230,231,.5);
        background-color: #fff;
    }
    .tags-header .tags-header-title{
        font-size: 15px;
        font-weight: 600;
        color: #000;
    }
    .tags-header .tags-sort{
        margin-left:auto
    }
    .tags-sort .tags-type{
        position: relative;
        padding: 12px 0;
        font-size: 14px;
        color: #72777b;
    }
    .tags-sort .tags-type:not(:last-child) {
        margin-right: 24px;
    }
    .tags-sort .tags-type:not(:last-child)::after{
        content:"";
        position:absolute;
        display:block;
        top: 50%;
        right: -12px;
        margin-top: -7px;
        width: 1px;
        height: 14px;
        background-color: #b2bac2;
        opacity: .5;
    }
    /*列表部分*/
    .tag-item:not(:last-child) {
        border-bottom: 1px solid rgba(230,230,231,.5);
    }
    .tag-item{
        background-color:#fff
    }
    .tag-item:not(:last-child) {
        border-bottom: 1px solid rgba(230,230,231,.5);
    }
    .tag-link{
        display: flex;
        align-items: center;
        padding: 6px 30px;
        min-height: 84px;
    }
    .avatar{
        flex: 0 0 auto;
        margin-right: 20px;
        width: 45px;
        height: 45px;
        border-radius: 50%;
    }
    .info-box{
        flex: 1 1 auto;
        min-width: 0;
    }
    .user-name{
        font-size: 16px;
        font-weight: 600;
        color: #2e3135;
    }
    .user-name .name{
        display: inline-block;
        vertical-align: top;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 128px;
    }
    .info-box .detail{
        margin-top: 7px;
        font-size: 12px;
        font-weight: 500;
        color: #b9c0c8;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .follow-btn{
        flex: 0 0 auto;
        margin: 0 0 0 12px;
        padding: 0;
        width: 88px;
        height: 28px;
        font-size: 12px;
        color: #92c452;
        background-color: #fff;
        border: 1px solid #92c452;
        border-radius: 2px;
    }
    .follow-btn:hover{
        opacity:.8
    }
    .follow-btn.active{
        color:#fff;
        background-color: #92c452;
    }
</style>